window.onload = function () {
    // 需求1.定义校验规则
    // form对象中有一个方法verify
    // 只要使用layui的模块，必须加载模块
    let form = layui.form
    form.verify({
        // 属性是规则名称,值是具体规则
        nickname: [
            /^[\S]{1,10}$/,
            '昵称的长度为1-10个字符'
        ]
    })

    // 需求2:获取用户信息 渲染到form表单中
    // 封装成函数,后面重置的时候要用
    // 函数不调用,不执行
    let layer = layui.layer
    initUserInfo()
    function initUserInfo() {
        axios({
            url: '/my/userinfo',
            method: 'get',
        }).then(({ data: res }) => {
            //成功回调
            // console.log(res)
            if (res.status !== 0) {
                //如果业务状态码响应失败 弹出失败信息
                return layer.msg(res.message)
            }
            // 根据官网,为form表单赋值
            // 内置模块->表单->表单赋值/取值
            form.val('formUserInfo', res.data)
        });
    }

    // 需求3:重置表单 触发表单的重置功能 重新渲染表单页面
    document.querySelector('#btnReset').onclick = function (e) {
        // 阻止默认跳转
        e.preventDefault()
        layer.msg('已重置信息')
        // 重新渲染表单
        initUserInfo()
    }

    // 需求4:提交表单
    document.querySelector('form').onsubmit = function (e) {
        e.preventDefault()
        // 发送axios
        axios({
            method: 'post',
            url: '/my/userinfo',
            // 设置了参数:根据参数类型会设置头信息;a=1&b=2
            //content-type:application/x-www-form-urlencoded
            data: $(this).serialize(),
        }).then(({ data: res }) => {
            // console.log(res);

            //如果请求失败
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            //成功:提示
            layer.msg('恭喜您,修改用户信息成功')
            //更新index页面的头像和用户信息
            //调用index.js里的封装的方法
            //直接调用无效 因为不是一个window对象
            window.parent.getUserInfo()
        }

        )
    }




}